<template>
    <div class="staff">

        <!--S提示-->
        <div id="hint">
            员工可以核销您发出去的所有卡券
        </div>
        <!--E提示-->
        <!--S内容-->
        <div id="list" v-if="data.length > 0">
            <cube-scroll ref="listScroll">
                <item
                        v-for="(item,index) in data"
                        :key="item.id"
                        :user="{nickname: item.nickname, avatar: item.avatar}"
                        :status="item.status"
                        @click.native="clickStaff(index)">
                </item>
            </cube-scroll>
        </div>
        <empty v-else>
            暂无员工
        </empty>
        <!--E内容-->

        <!--S添加按钮，点击显示二维码，扫码添加员工-->
        <cube-button
                id="add-btn"
                @click="clickAddBtn"
        >添加员工</cube-button>
        <!--E添加按钮，点击显示二维码，扫码添加员工-->

        <!--S申请二维码区域-->
        <apply
                :show="apply.show"
                @close="apply.show = false"
                @scan="getList"
                >
        </apply>
        <!--E申请二维码区域-->

    </div>
</template>

<script>
// 员工管理
import Item from "./components/item"
import Apply from "./components/apply"
import Empty from "@c/empty"
export default {
    name: "staff",
    data() {
        return {
            // 员工列表
            data: [],
            // 操作的数据下标
            index:0,
            // 申请员工区域
            apply: {
                show: false
            }
        }
    },
    components: {
        Item,
        Apply,
        Empty
    },
    mounted() {
        this.getList()
    },
    methods: {
        /**
         * 添加员工
         */
        clickAddBtn() {
            this.apply = {
                show: true
            }
        },
        /**
         * 点击操作员工
         */
        clickStaff(index) {
            this.index = index
            let data = this.data[index]
            let sheet_data = [
                {
                    content: '移除',
                    value: 'remove'
                }
            ]
            if(data.status === 2) {
                sheet_data.unshift({
                    content: '通过',
                    value: 'pass'
                })
            }
            this.$createActionSheet({
                title: '操作',
                data: sheet_data,
                onSelect: (res) => {
                    if(res.value === 'remove') {
                        this.remove(data.id)
                    } else {
                        this.pass(data.id)
                    }
                }
            }).show()
        },
        /**
         * 获取用户员工列表
         */
        getList() {
            this.$sendGet("staff")
                .then((res) => {
                    let data = res.data.data
                    if(data.length > 0) {
                        this.data = data
                    } else {
                        this.data = []
                    }
                })
        },
        /**
         * 删除员工
         */
        remove(staff_id) {
            this.$del('staff/' + staff_id)
                .then(() => {
                    this.getList()
                })
                .catch((error) => {
                    this.$handleError(this, error)
                })
        },
        /**
         * 修改状态
         */
        pass(staff_id) {
            this.$sendGet("staff/pass/" + staff_id)
                .then(() => {
                    this.getList()
                })
                .catch((error) => {
                    this.$handleError(this, error)
                })
        }
    }
}
</script>

<style scoped lang="less" src="./staff.less"></style>
